<html>
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/3.1.1/socket.io.js" integrity="sha512-oFOCo2/3DtjrJG4N27BjSLQWoiBv171sK6a+JiWjp/7agxC2nCUP358AqzxkBUb5jX8g6CYLPdSKQTbC0weCwA==" crossorigin="anonymous"></script>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            var domain =  $(location).attr('protocol')+'//' + $(location).attr('host');
            var socket = io.connect(domain+'/kafka');

            socket.on('kafkaconsumer1', function(msg) {
                $('#consumer').html("")
            });
            socket.on('kafkaconsumer', function(msg) {
                $('#consumer').append('<br>' + $('<div/>').text(msg.data).html());
            });

            socket.on('kafkaproducer', function(msg) {
                $('#producer').append('<br>' + $('<div/>').text(msg.data).html());
            });

            socket.on('logs', function(msg) {
                $('#log').append('<br>' + $('<div/>').text(msg.data).html());
            });

            $('form#emit').submit(function(event) {
                socket.emit('kafkaproducer', $('#emit_data').val());
                return false;
            });
        });
    </script>
</head>
<body>
<form id="emit" method="POST" action='#'>
    <label for="emit_data">输入原始镜像名称</label>
    <div></div>
    <textarea name="emit_data" id="emit_data" rows="3" cols="100" placeholder="输入原始镜像名称">

    </textarea>
        <div></div>
    <input type="submit" value="Echo">
</form>
<h2>Logs</h2>
<div id="log"></div>
<h2>Producer</h2>
<div id="producer"></div>
<h2>Consumer</h2>
<div id="consumer"></div>
</body>
</html>
